<template>
	<yd-layout id='bdDiploma' class=''>
		<div class="header">恭喜你毕业啦，亲爱的伙伴</div>
		<div class="diploma" v-show="showDownImg" ref='diplomaImgRef'>
			<img class="diploma_img" src="../../../assets/bd_img/diploma_2.png" alt="" />
			<div class="content">
				<div class="content_header">
					<img class="header_img" :src="imgSrc_3" alt="" />
					<div class="header_right">
						<div class="title c_size_34_48 c_text_ellipsis_1">{{dataObj.nick_name}}</div>
						<div class="id">No.{{dataObj.uid}}</div>
					</div>

				</div>
				<div class="label c_size_30_42">{{dataObj.newTime}}完成新人宝典课程学习，成功晋升为<span style="color: #FE5742;">“直销精英”</span></div>
				<div class="study_day">
					学习天数<span>{{dataObj.spend_day}}</span>天
				</div>
				
			</div>
			<img class="qrCode_img" :src="imgSrc_1" alt="" />
			<div class="project_title">{{$root.config.shareTitle}}</div>
		</div>
		
		<div class="diploma_down" v-show="!showDownImg">
			<img class="down_f_c_img" :src="imgSrc_2" alt="" />
			<div class="down_text">长按上方图片保存到相册</div>
		</div>
		<yd-popup class='pop_f' v-model="popShow" position="bottom" width="100%" height='100%'>
			<div class="pop_f_c">
				<!--!popShow-->
				<div class="pop" v-show="!popShow" id='diplomaImg'>
					<img class="pop_back_img" src="../../../assets/bd_img/diploma_2.png" alt="" />
					<div class="pop_c" >
						<div class="pop_header">
							<img class="pop_header_img" :src="imgSrc_3" alt="" />
							<div class="pop_header_right">
								<div class="pop_header_name c_size_34_48">{{dataObj.nick_name}}</div>
								<div class="pop_header_no">No.{{dataObj.uid}}</div>
							</div>
						</div>
						<div class="pop_label">{{dataObj.newTime}}完成新人宝典课程学习，成功晋升为<span>“直销精英”</span></div>
						<div class="pop_study">
							学习天数<span>{{dataObj.spend_day}}</span>天
						</div>
					</div>
					<img class="qrCode_img" :src="imgSrc_1" alt="" />
					<!--<qriously v-show='false' class="qr_code_img" :value="value" :size="size" :backgroundAlpha="backgroundAlpha" />-->
				</div>
				<div class="down_img_f">
					<img class="pop_f_c_img" :src="imgSrc_2" alt="" />
					<div class="pop_btn">
						<div @click="popShow=false" class="pop_btn_list">
							<img src="../../../assets/bd_img/diploma_4.png" alt="" />
							<div>取消</div>
						</div>
						<div class="pop_btn_list">
							<img src="../../../assets/bd_img/diploma_3.png" alt="" />
							<div>长按保存</div>
						</div>
					</div>
				</div>
			</div>
		</yd-popup>
	</yd-layout>
</template>

<script>
//	import VueQriously from 'vue-qriously'
//	import Vue from 'vue'
//	Vue.use(VueQriously)
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	import html2canvas from 'html2canvas'
	export default {
		components: {
			[Popup.name]: Popup,
		},
		data() {
			return {
				dataObj: {},
				value: '',
				backgroundAlpha: 1,
				size: 80,
				popShow: false,
				imgSrc_1:'', 
				imgSrc_2:'',
				imgSrc_3:'',
				showDownImg:true,
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title='毕业成绩单'
			this.getReport();
			
			
			
		},
		methods: {
			openPop(){
				this.popShow=true;	
			},
			getReport() {
				this.$root.ajax({
					name: 'bible/report',
					type:'get',
					params: {

					}
				}).then((d) => {
					d.data.newTime = this.$root.getDate(new Date(d.data.begin_time * 1000))
					this.dataObj = d.data
					this.imgSrc_3 = this.dataObj.avatar
					
					var vm = this;
					//this.value='1234'
					//let canvas = document.getElementsByTagName('canvas')
					//this.imgSrc_1 = canvas[0].toDataURL("image/png");
					
					this.imgSrc_1 = this.dataObj.download_url
					this.$nextTick(()=>{
	//					html2canvas(this.$refs.diplomaImgRef).then(canvas => {
	//						let dataUrl = canvas.toDataURL("image/png", 1.0)
	//						vm.imgSrc_2 = dataUrl
	//					});
//					    setTimeout(()=>{
					    	var width = this.$refs.diplomaImgRef.offsetWidth; 
						    var height = this.$refs.diplomaImgRef.offsetHeight; 
						    var canvas = document.createElement("canvas"); 
						    var context = canvas.getContext("2d");
						    var scale = 3; 
						
						    canvas.width = width * scale;
						    canvas.height = height * scale;
				    		    
						    let opts={
						    	scale: scale, 
						        canvas: canvas, 
						        logging: true, 
						        width: width, 
								height: height,
								allowTaint: true,
								useCORS: true,
						    }
						    html2canvas(this.$refs.diplomaImgRef, opts).then(function (canvas) {
					            vm.showDownImg = false
					            let dataUrl = canvas.toDataURL("image/png", 2.0)
								vm.imgSrc_2 = dataUrl
						    });	
//					    },3000)
					})
					
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './diploma.scss';
</style>